<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>Wap 电商平台</title>
		<meta charset="UTF-8">
		<script th:replace="common/head::static"></script>
	</head>
</html>
<body>
	<div id="app" class="order-container" >
		<div style="text-align:center;margin:20px 0px;">
			<nut-avatar style="width:200px;height:200px;flex:1;" bg-image="https://nutui.jd.com/3x/img/cell-avatar.jpeg"></nut-avatar>
		</div>
		<column style="padding:10px;">
			<nut-textinput v-model="name" name="name" style="width:100%;margin-bottom:15px;" placeholder="请输入登录名" :clearBtn="true" :disabled="false"></nut-textinput>
			<nut-textinput v-model="pwd" name="pwd" type="password" style="width:100%;margin-bottom:15px;" placeholder="请输入密码 :"  :clearBtn="true" :disabled="false"></nut-textinput>
			<nut-button  block shape="circle" @click="submit">登录</nut-button>
		</column>
		<row style="position:absolute;bottom:5px;width:100%;padding:10px;box-sizing:border-box;">
			<a href="#" style="color:gray;">注册新用户</a>
			<a href="#" style="position: absolute;right: 5px;color:gray;">找回密码</a>
		</row>
	</div>
	<script type="text/javascript">
		new Vue({
			el: '#app',
            data() {
				return {
			      	name:"",
			      	pwd:""
				}
			},
			created: function(){
				
			},
			methods: {
				submit:function(){
					data = {
						username:this.name,
						password:this.pwd
					};
					// TODO,数据验证
					
					// 提交请求
					$.ajax({url:"/login",type:"post",
						data:data,
						success:function(ret){
							location.href = "/my";
						},
						error: function(ret){
							console.log(ret);
						}
					});
				}
			}
		});
	</script>
</body>